import React from 'react'
import { Row, Col, Checkbox ,Select } from 'antd'
import { PIVOT_CHART_SHADOW_OPTIONS} from 'app/globalConstants'
const Option = Select.Option
import ColorPicker from 'components/ColorPicker'
const styles = require('../Workbench.less')

//chart 阴影调整

export interface IShadowConfig {
  shadowType: string
  startColor: string,
  endColor: string,
  lineStartColor: string,
  lineEndColor: string,
  showSymbol:boolean,
}

interface IShadowProps {
  title: string
  config: IShadowConfig
  onChange: (prop: string, value: any) => void
}

export class ShadowSection extends React.PureComponent<IShadowProps, {}> {

  private selectChange = (prop) => (value) => {
    this.props.onChange(prop, value)
  }

  private checkboxChange = (prop) => (e) => {
    this.props.onChange(prop, e.target.checked)
  }

  private colorChange = (prop) => (color) => {
    this.props.onChange(prop, color)
  }

  public render () {
    const { title, config } = this.props
    const {
      shadowType,
      startColor,
      endColor,
      lineStartColor,
      lineEndColor,
      showSymbol,
    } = config

    const fontFamilies = PIVOT_CHART_SHADOW_OPTIONS.map((f) => (
      <Option key={f.value} value={f.value}>{f.name}</Option>
    ))

    return (
      <div className={styles.paneBlock}>
        <h4>{title}</h4>
        <div className={styles.blockBody}>
          <Row gutter={8} type="flex" align="middle" className={styles.blockRow}>
          <Col span={8}>阴影渐变填充</Col>
          <Col span={16}>
            <Select
              placeholder="渐变类型"
              className={styles.blockElm}
              value={shadowType}
              onChange={this.selectChange('shadowType')}
            >
              {fontFamilies}
            </Select>
          </Col>
          </Row>
          <Row gutter={8} type="flex" align="middle" className={styles.blockRow}>
          <Col span={8}>
            阴影起始颜色
            </Col>
            <Col span={4}>
              <ColorPicker
                value={startColor}
                onChange={this.colorChange('startColor')}
              />
            </Col>
            <Col span={8}>
            阴影结束颜色
            </Col>
            <Col span={4}>
              <ColorPicker
                value={endColor}
                onChange={this.colorChange('endColor')}
              />
            </Col>
          </Row>
          <Row gutter={8} type="flex" align="middle" className={styles.blockRow}>
          <Col span={8}>
            线条起始颜色
            </Col>
            <Col span={4}>
              <ColorPicker
                value={lineStartColor}
                onChange={this.colorChange('lineStartColor')}
              />
            </Col>
            <Col span={8}>
            线条结束颜色
            </Col>
            <Col span={4}>
              <ColorPicker
                value={lineEndColor}
                onChange={this.colorChange('lineEndColor')}
              />
            </Col>
          </Row>
          <h4>线段节点</h4>
          <Row gutter={8} type="flex" align="middle" className={styles.blockRow}>
          <Col span={2}>
              <Checkbox
                checked={showSymbol}
                onChange={this.checkboxChange('showSymbol')}
              />
            </Col>
            <Col span={6}>节点展示</Col>
          </Row>
        </div>
      </div>
    )
  }
}

export default ShadowSection
